<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>element通知</title>
    <link rel="stylesheet" href="../../css/element.css">
    <script src="../../js/vue2.6.js"></script>
    <script src="../../js/element.js"></script>
</head>
<body>
<div id="app">
    <template>
        <el-button
                plain
                @click="open1">
            成功
        </el-button>
        <el-button
                plain
                @click="open2">
            警告
        </el-button>
        <el-button
                plain
                @click="open3">
            消息
        </el-button>
        <el-button
                plain
                @click="open4">
            错误
        </el-button>
    </template>
</div>
<script>
    var Main = {
        methods: {
            open1() {
                this.$notify({
                    title: '成功',
                    message: '这是一条成功的提示消息',
                    type: 'success'
                });
            },

            open2() {
                this.$notify({
                    title: '警告',
                    message: '这是一条警告的提示消息',
                    type: 'warning'
                });
            },

            open3() {
                this.$notify.info({
                    title: '消息',
                    message: '这是一条消息的提示消息'
                });
            },

            open4() {
                this.$notify.error({
                    title: '错误',
                    message: '这是一条错误的提示消息'
                });
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</body>
</html>